import QtQuick 2.0

Rectangle {
    id: root
    property string title: ""

    property bool selectedC1: true
    property bool selectedC2: true
    property bool selectedC3: true
    property bool selectedC4: true

    property string channel1: "FAM"
    property string channel2: "VIC"
    property string channel3: "ROX"
    property string channel4: "CY5"

    property int   arrowWidth: 30*dp

    property int channelNum: (selectedC1?1:0) + (selectedC2?1:0) + (selectedC3?1:0) + (selectedC4?1:0)

    property int    rowNum:  (55*dp*channelNum) > (width-16-arrowWidth) ? 2 : 1
    property int    colNum:  Math.floor(root.width-16-arrowWidth) / 55*dp

    Component.onCompleted: {
        colNum = Math.floor(root.width-16-arrowWidth) / 55*dp
    }

    property bool  listVisible: false

    height: rowNum === 1 ? 40*dp : 66*dp
    width: 180*dp
    radius: 3
    border.color: "#CCCCCC"

    function getChannelList(){

        var res = []
        if(selectedC1){
            res.push(channel1)
        }if(selectedC2){
            res.push(channel2)
        }if(selectedC3){
            res.push(channel3)
        }if(selectedC4){
            res.push(channel4)
        }
        return res;
    }

    Image{
        height: 25*dp
        width: 25*dp
        x: root.width - 30*dp
        anchors.verticalCenter: root.verticalCenter
        source: listVisible ? "qrc:/picture/uparrow.png" : "qrc:picture/downarrow.png"
    }

    MouseArea{
        anchors.fill: parent

        cursorShape: Qt.PointingHandCursor
        onReleased: {
            listVisible = !listVisible
            root.focus = true
        }
    }
    onFocusChanged: {
        if(!focus){
            listVisible = false
        }
    }

    Grid{
        spacing: 4
        id: layout_grid
        columns: colNum
        anchors.fill: parent
        anchors.margins: 8
        ComboxChannelItem{
            visible: selectedC1
            text: channel1
            onDeleteItem: {
                selectedC1 = false
            }
        }ComboxChannelItem{
            visible: selectedC2
            text: channel2
            onDeleteItem: {
                selectedC2 = false
            }
        }ComboxChannelItem{
            visible: selectedC3
            text: channel3
            onDeleteItem: {
                selectedC3 = false
            }
        }ComboxChannelItem{
            visible: selectedC4
            text: channel4
            onDeleteItem: {
                selectedC4 = false
            }
        }
    }

    Rectangle{          // 上拉列表
        id: dropList
        height: 136*dp
        width: root.width
        y: -138*dp
        radius: 5
        clip: true

        state: listVisible ? "show" : "hide"
        states:[
            State{
                name: "show"
                PropertyChanges {
                    target: dropList
                    height: 136*dp
                    y: -138*dp
                }
            },
            State{
                name: "hide"
                PropertyChanges {
                    target: dropList
                    height: 0
                    y: -2*dp
                }
            }
        ]
        transitions: [
            Transition {
                from: "show"
                to: "hide"
                NumberAnimation{
                    properties: "height"
                    duration: 150
                }NumberAnimation{
                    properties: "y"
                    duration: 150
                }
            },Transition {
                from: "hide"
                to: "show"
                NumberAnimation{
                    properties: "height"
                    duration: 150
                }NumberAnimation{
                    properties: "y"
                    duration: 150
                }
            }
        ]

        Column{
            height: 138*dp
            width: root.width
            spacing: 0
            anchors.fill: parent
            ComboxChannelListItem{
                text: channel1
                checked: selectedC1
                onReleased: {
                    selectedC1 = !selectedC1
                }
            }ComboxChannelListItem{
                text: channel2
                checked: selectedC2
                onReleased: {
                    selectedC2 = !selectedC2
                }
            }ComboxChannelListItem{
                text: channel3
                checked: selectedC3
                onReleased: {
                    selectedC3 = !selectedC3
                }
            }ComboxChannelListItem{
                text: channel4
                checked: selectedC4
                onReleased: {
                    selectedC4 = !selectedC4
                }
            }
        }

    }



}
